<template>
  <div class="home">
    <!-- 搜索框 -->
    <van-search
      v-model="searchValue"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      disabled
      @click="$router.push('/home/searchPopup')"
    />
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item v-for="item in bannerList" :key="item.id">
        <img :src="item.image_url" width="100%" alt="">
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索弹出层 -->
    <transition name="slide">
      <router-view></router-view>
    </transition>
    <!-- 分类 -->
    <div class="category">
      <van-grid :column-num="5">
        <van-grid-item :icon="item.icon_url" :text="item.name" v-for="item in channelList" :key="item.id"/>
      </van-grid>
    </div>
    <!-- 品牌制造商 -->
    <div class="brand">
      <div class="title">品牌制造商直供</div>
      <ul>
        <li v-for="item in brandList" :key="item.id">
          <img :src="item.pic_url" alt="">
          <p>{{item.name}}</p>
          <div>最低价：<span>{{item.floor_price | RMBformat}}</span></div>
        </li>
      </ul>
    </div>
    <!-- 新品首发 -->
    <div class="newGoods">
      <div class="title">新品首发</div>
      <ul>
        <li v-for="item in newGoodsList" :key="item.id">
          <img :src="item.list_pic_url" alt="">
          <p>{{item.name}}</p>
          <span>{{item.retail_price | RMBformat}}</span>
        </li>
      </ul>
    </div>
    <!-- 人气推荐 -->
    <div class="hotGoods">
    <div class="title">人气推荐</div>
    <van-card
      v-for="item in hotGoodsList" :key="item.id"
      :price="Number(item.retail_price).toFixed(2)"
      :desc="item.goods_brief"
      :title="item.name"
      :thumb="item.list_pic_url"
    />
    </div>
    <div class="m-buttom"></div>
  </div>
</template>

<script>
import { getHomeList } from '@/request/api.js'
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      // 搜索框双向绑定数据
      searchValue: '',
      // 轮播图数据
      bannerList: [],
      // 分类数据
      channelList: [],
      // 品牌制造商
      brandList: [],
      // 新品首发数据
      newGoodsList: [],
      // 人气推荐数据
      hotGoodsList: []
    }
  },
  created() {
    getHomeList().then(res => {
      console.log(res.data)
      this.bannerList = res.data.banner
      this.channelList = res.data.channel
      this.brandList = res.data.brandList
      this.newGoodsList = res.data.newGoodsList
      this.hotGoodsList = res.data.hotGoodsList
    })
  }
}
</script>

<style lang="less" scoped>
.van-card {
  font-size: 1rem;
  padding: .5rem;
}
.van-swipe {
  font-size: .16rem;
}
.slide-enter, .slide-leave-to {
  right: -100%;
}
.slide-enter-active, .slide-leave-active {
  transition: right .3s;
}
.slide-enter-to, .slide-leave {
  right: 0;
}
.category {
  margin-bottom: 1rem;
  .van-row {
    padding: 1.5rem 7%;
    background: #5c5d6b;
    color: #fff;
    .van-col {
      line-height: 1rem;
      font-size: 1rem;
      img {
        width: 5rem;
        border-radius: 50%;
        display: block;
      }
    }
  }
}
.brand {
  background-color: #fff;
  margin-bottom: 1rem;
  .title {
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      background-color: #eee;
      width: 49.5%;
      margin-bottom: .2rem;
      position: relative;
      font-size: .9rem;
      color: #493a3a;
      img {
        width: 100%;
      }
      p {
        position: absolute;
        left: .6rem;
        top: .6rem;
      }
      div {
          position: absolute;
          left: .6rem;
          top: 2rem;
          color: black;
          span {
        color: red;
          }
      }
    }
  }
}
.newGoods {
  background-color: #fff;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  .title {
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    border-bottom: 2px solid #eee;
  }
  ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li {
      width: 49.5%;
      margin-bottom: .2rem;
      position: relative;
      font-size: .9rem;
      color: #493a3a;
      text-align: center;
      img {
        width: 100%;
      }
      p {
        margin-bottom: .3rem;
      }
      span {
        color: red;
      }
    }
  }
}
.hotGoods {
  background-color: #fff;
  margin-bottom: 1rem;
  .title {
    text-align: center;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    border-bottom: 2px solid #eee;
  }
}
.m-buttom {
  margin-bottom: 3.5rem;
}
</style>
